CSS: Flexbox
Flexible Box Layout Module
チートシート
Playgroundもググったらいっぱい出てくるmrsekut.icon
Elementパネルで確認できる
flex指定してるところの右のアイコンをクリックすると出てくる
v90で入った
https://gyazo.com/dea55b0c3ae1a986474a2d4f2446bdc9
Flexbox大まかな構造
flexのpropsは複数あるが、ContainerとItemどちらに使うものなのかが決まっているので意識して使い分ける必要がある
Flex Container
親要素
display: flexを指定する方
flex-direction
アイテムの並び順を指定する
flex-wrap
アイテムの折り返しを指定する
flex-flow
flex-directionとflex-wrapを一括指定
justify-content
itemのフロー方向に対する配置を指定する
align-content
itemの書字方向に対する配置を指定する
align-items
itemの中身の書字方向に対する配置を指定する
Flex Item
子要素
flex
flex-grow
flex-shrink
アイテムの縮み率を指定
flex-basis
order
アイテムの並び順を指定
align-self
アイテムの垂直方向の位置を指定
Flexboxにmargin: autoを指定する
アルゴリズム
https://www.w3.org/TR/css-flexbox-1/#layout-algorithm
https://triple-underscore.github.io/css-flexbox-ja.html#layout-algorithm
日本語
用語
https://www.w3.org/TR/css-flexbox-1/#box-model